<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title></title>
		<header th:replace="header::html"></header>
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">员工名称</label>
						<div class="layui-input-inline">
							<input type="text" name="empName" placeholder="" class="layui-input">
						</div>
						<label class="layui-form-label">开始时间</label>
						<div class="layui-input-inline">
							<input type="text" id="beginHireDate" name="beginHireDate" placeholder="" class="layui-input">
						</div>
						<label class="layui-form-label">结束时间</label>
						<div class="layui-input-inline">
							<input type="text" id="endHireDate" name="endHireDate" placeholder="" class="layui-input">
						</div>
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="emp-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="emp-table" lay-filter="emp-table"></table>
			</div>
		</div>
		
		<script type="text/html" id="emp-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</button>
			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
				<i class="layui-icon layui-icon-delete"></i>
				删除
			</button>
		</script>
		
		<script type="text/html" id="emp-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>


		<script>
		    layui.use(['table','form','jquery','laydate'],function () {
		        let table = layui.table,
					form = layui.form,
					$ = layui.jquery,
                    laydate = layui.laydate;

                laydate.render({
                    elem: '#beginHireDate' //指定元素
                });
                laydate.render({
                    elem: '#endHireDate' //指定元素
                });

		        let cols = [
		            [
		                {type:'checkbox'},
                        {title: '员工编号', field: 'employeeId', align:'center',hide: true, width:100},
		                {title: '员工名称', field: 'name', align:'center', width:100},
		                {title: '部门名称', field: 'dept', align:'center',templet:function (obj) {
		                       if(obj.dept == null){
		                           return '';
							   }else{
		                           return obj.dept.deptName;
							   }
                            }},
		                {title: '入职日期', field: 'hireDate', align:'center',templet:'<div>{{layui.util.toDateString(d.hireDate,\'yyyy-MM-dd\')}}</div>'},
		                {title: '电话号码', field: 'phoneNumber', align:'center'},
		                {title: '薪水', field: 'salary', align:'center'},
		                {title: '领导名称', field: 'manager', align:'center',templet:function (obj) {
                                if(obj.manager == null){
                                    return '';
                                }else{
                                    return obj.manager.name;
                                }
                            }},
		                {title: '操作', toolbar: '#emp-bar', align:'center', width:195}
		            ]
		        ]
				let tableIns = table.render({
		            elem: '#emp-table',
		            url: '/api/emp/list',
		            page: true ,
		            cols: cols ,
		            skin: 'line',
		            toolbar: '#emp-toolbar',
		            defaultToolbar: [{
		                layEvent: 'refresh',
		                icon: 'layui-icon-refresh',
		            }, 'filter', 'print', 'exports']
		        });



		        table.on("toolbar(emp-table)",function (obj) {
					if(obj.event == 'add'){
					    window.add();
					}else if(obj.event == 'batchRemove'){


					}
                });


		        window.add =  function(){
                    layer.open({
                        type: 2,
                        title: '新增',
                        shade: 0.1,
                        area: ['500px', '600px'],
                        content: '/api/emp/add'
                    });
				};



		        form.on('submit(emp-query)',function (obj) {
		            let params={
					};
                    params.name = obj.field.empName;
                    if(obj.field.beginHireDate){
                        params.beginHireDate = obj.field.beginHireDate;
					}
					if(obj.field.endHireDate){
                        params.endHireDate = obj.field.endHireDate;
					}

                    tableIns.reload({
                        where: params
                        ,page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false;
                });

		    })
		</script>
	</body>
</html>
